<!--
 * @Description  : 公共页面整体布局
 * @Author       : YiDing Xue
 * @Date         : 2023-02-24
 * @LastEditors  : YiDing Xue
 * @LastEditTime : 2023-03-07
-->
<template>
  <transition name="fade-slide" mode="in-out" appear>
    <section class="h-100vh overflow-x-hidden color-black">
      <div v-if="placeholder" h-50 />
      <header v-if="showHeader" ref="root" :class="headerClass" flex justify-between items-center w-100vw h-60 fixed top-0 z-100 px-15>
        <router-link :to="leftIcon.path">
          <TheIcon :icon="leftIcon.icon" v-bind="props.leftIcon" />
        </router-link>
        <slot v-if="$slots.center" name="center" />
        <router-link :to="rightIcon.path">
          <TheIcon :icon="leftIcon.icon" v-bind="props.rightIcon" />
        </router-link>
      </header>
      <article :class="articleClass">
        <slot />
      </article>
      <AppFooter v-if="showFooter" />
    </section>
  </transition>
</template>
<script setup>
const props = defineProps({
  leftIcon: {
    type: Object,
    default: () => {
      return { icon: 'ep:home-filled', size: 32, path: 'home', color: 'black' }
    }
  },
  rightIcon: {
    type: Object,
    default: () => {
      return { icon: 'zondicons:user-solid-square', size: 32, path: 'personal-center', color: 'black' }
    }
  },
  showFooter: {
    type: Boolean,
    default: false
  },
  showHeader: {
    type: Boolean,
    default: true
  },
  headerClass: {
    type: String,
    default: 'bg-white'
  },
  placeholder: {
    type: Boolean,
    default: true
  },
  articleClass: {
    type: String,
    default: 'p-15'
  }
})
</script>
<style>
section::-webkit-scrollbar {
  display: none;
}
</style>
